<template>
  <div id="SP">
    <section class="Xmain" v-for="(v, i) in xie" :key="i" @click="fn1(v)">
      <section class="Msp">
        <section class="Msp1">
          <img :src="v.ximg" />
        </section>
        <section class="Msp2">
          <section class="Msp1-1">
            <h2>{{ v.xtitle }}</h2>
          </section>
          <section class="Msp1-2">
            <section class="ming">
              <section class="m1">￥{{ v.xprice }}</section>
              <section class="m2">{{ v.xman }}+人付款</section>
            </section>
          </section>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      xie: [],
    };
  },
  created() {
    axios({
      url: "/data/mock",
      method: "get",
    })
      .then((ok) => {
        this.xie = ok.data.xie;
      })
      .catch((err) => {
        console.log("请求失败了", err);
      });
  },
  methods: {
    fn1(v) {
      this.$router.push({path:"/Xqing",
      query:{
        list: v,
      }});
      this.$store.commit("DATA_NUM_UPDATE",v)
    },
  },
};
</script>
 
<style scoped>
#SP {
  column-count: 2;
  padding-left: 0.05rem;
  padding-right: 0.05rem;
}
#SP .Xmain {
  width: 100%;

  /* background: pink; */
}
#SP .Xmain .Msp {
  width: 1.77rem;
  height: 2.45rem;
  /* border: 0.02rem solid silver; */
  break-inside: avoid;
  column-span: none;
}
#SP .Xmain .Msp .Msp1 {
  width: 1.77rem;
  height: 1.66rem;
  /* border: 0.01rem solid black; */
}
#SP .Xmain .Msp .Msp1 img {
  width: 100%;
  height: 100%;
}

#SP .Xmain .Msp .Msp2 {
  width: 1.77rem;
  height: 0.79rem;
  /* border: 0.01rem solid red; */
  color: #8b8b8b;
}
#SP .Xmain .Msp .Msp2 .Msp1-1 {
  width: 100%;
  height: 0.34rem;
  /* border: 0.01rem solid green; */
}
#SP .Xmain .Msp .Msp2 .Msp1-1 h2 {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  font-size: 0.14rem;
  line-height: 0.2rem;
}
#SP .Xmain .Msp .Msp2 .Msp1-2 {
  width: 100%;
  height: 0.42rem;
  /* border: 0.01rem solid blue; */
}
#SP .Xmain .Msp .Msp2 .Msp1-2 .ming {
  width: 100%;
  height: 0.14rem;
  /* background: cadetblue; */
  margin-top: 0.14rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
#SP .Xmain .Msp .Msp2 .Msp1-2 .ming .m1 {
  width: 0.55rem;
  /* background: coral; */
  overflow: hidden;
  color: black;
  font-weight: 700;
  text-align: center;
  line-height: 0.14rem;
}
#SP .Xmain .Msp .Msp2 .Msp1-2 .ming .m2 {
  width: 0.8rem;
  /* background: darkgray; */
  overflow: hidden;
  font-size: 0.12rem;
}
</style>